<template>
  <ElDropdown
    class="table-handle"
    v-if="data.isActivated"
    :class="handleHorizontal ? 'is-horizontal' : 'is-vertical'"
    :placement="handleHorizontal ? 'bottom' : 'right'"
    trigger="click"
  >
    <div class="table-handle__button" :class="{ 'is-disabled': !menu.length }">•••</div>

    <ElDropdownMenu v-if="menu.length" class="fa-table-handle__menu" slot="dropdown">
      <ElDropdownItem v-for="(item, index) in menu" :key="index" @click.native.stop="item.handler">{{
        item.text
      }}</ElDropdownItem>
    </ElDropdownMenu>
  </ElDropdown>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'
import { Widget } from '@/models'
import { WidgetMenuItem } from '@/types'

export default defineComponent({
  name: 'TableHandle',

  props: {
    /** 控件数据 */
    data: {
      type: Widget,
      required: true
    },

    /** 字段索引 */
    fieldIndex: {
      type: Number,
      default: -1
    },

    /** 数据项索引 */
    itemIndex: {
      type: Number,
      default: -1
    }
  },

  setup(props) {
    /** 是否字段操作 */
    const isField = computed(() => props.itemIndex === -1)

    /** 是否头部操作 */
    const isHeader = computed(() => {
      const { itemIndex, fieldIndex } = props
      return itemIndex === -1 && fieldIndex === -1
    })

    /** 菜单是否横向 */
    const handleHorizontal = computed(() => {
      const widget = props.data
      const { isHorizontalTable: horizontal } = widget

      if (isHeader.value) return !horizontal

      return horizontal ? isField.value : !isField.value
    })

    /** 获取操作菜单列表 */
    function getMenu() {
      const { itemIndex, fieldIndex, data: widget } = props
      const { tableOptions: options, isHorizontalTable: horizontal } = widget

      /** 显示表头 */
      const actionShowHeader = {
        text: '显示表头',
        enable: widget.isSet && options.headerHidden,
        handler: () => (options.headerHidden = false)
      }

      if (widget.isSet && isHeader.value) {
        // 设置时，允许隐藏表头

        return [
          {
            text: '隐藏表头',
            enable: !options.headerHidden,
            handler: () => (options.headerHidden = true)
          }
        ]
      } else if (widget.isSet && isField.value) {
        // 设置时，允许操作字段

        /** 字段长度 */
        const fieldLength = widget.tableFields.length
        /** 是否允许新增字段 */
        const fieldAddible = fieldLength < (horizontal ? widget.tableColsMax : widget.tableRowsMax)

        return [
          actionShowHeader,
          {
            text: horizontal ? '左侧新增列' : '上方新增行',
            enable: fieldAddible,
            handler: () => widget.addTableField(fieldIndex)
          },
          {
            text: horizontal ? '右侧新增列' : '下方新增行',
            enable: fieldAddible,
            handler: () => widget.addTableField(fieldIndex + 1)
          },
          {
            text: horizontal ? '删除列' : '删除行',
            enable: fieldLength > 1,
            handler: () => widget.removeTableField(fieldIndex)
          }
        ]
      } else if (widget.isSet || (widget.isUse && options.dynamic)) {
        // 设置 和  动态表格填写时，允许操作数据

        /** 数据长度 */
        const dataLength = widget.tableData.length
        /** 是否允许新增字段 */
        const dataAddible = dataLength < (horizontal ? widget.tableRowsMax : widget.tableColsMax)

        return [
          actionShowHeader,
          {
            text: horizontal ? '上方新增行' : '左侧新增列',
            enable: dataAddible,
            handler: () => widget.addTableData(itemIndex)
          },
          {
            text: horizontal ? '下方新增行' : '右侧新增列',
            enable: dataAddible,
            handler: () => widget.addTableData(itemIndex + 1)
          },
          {
            text: horizontal ? '删除行' : '删除列',
            enable: dataLength > Math.max((widget.required && options.requiredCount) || 0, 1),
            handler: () => widget.removeTableData(itemIndex)
          }
        ]
      }

      return []
    }

    return {
      /** 菜单是否横向 */
      handleHorizontal,

      /** 菜单列表 */
      menu: computed<WidgetMenuItem[]>(() => getMenu().filter(i => i.enable !== false))
    }
  }
})
</script>

<style lang="scss">
$table-handle-size: 16px;

.fa-widget-table-main .table-handle {
  position: absolute;
  overflow: hidden;

  &__button {
    color: $color-info-light;
    font-weight: 100;
    font-size: 12px;
    line-height: $table-handle-size;
    text-align: center;
    background: mix(#dcdee0, #fff, 30%);
    cursor: pointer;
    transition: all 0.25s ease-in-out;
    user-select: none;

    &:hover {
      color: $color-primary;
      background: mix($color-primary, #fff, 10%);
    }

    &:focus-visible {
      outline-color: $color-primary;
    }

    &.is-disabled {
      color: $color-info-light !important;
      background: mix(#dcdee0, #fff, 30%) !important;
      cursor: not-allowed;
    }
  }

  &.is-horizontal {
    right: 1px;
    bottom: 100%;
    left: 1px;
    height: $table-handle-size;
    margin-bottom: 4px;
  }

  &.is-vertical {
    top: 1px;
    right: 100%;
    bottom: 1px;
    width: $table-handle-size;
    margin-right: 4px;
    writing-mode: tb;
  }
}

.fa-table-handle__menu {
  .el-dropdown-menu__item {
    line-height: 28px;
  }
}
</style>
